<!DOCTYPE html>
<html>
<head>
	<title>Fullscreen with big images</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>


	<!-- Just don’t want to repeat this prefix in every img[src] -->
	<base href="i/okonechnikov/">
</head>

<body>

<p>Fullscreen with separate images:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama"
     data-allow-full-screen="native">
  &lt;img src="1.jpg" <mark>data-full="1_full.jpg"</mark>>
&lt;/div></code></pre>

<p>Click icon at the top-right.</p>

<!-- Fotorama -->
<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%"
     data-fit="cover"
     data-allow-full-screen="true">
	<a href="http://s.fotorama.io/okonechnikov/9-lo.jpg" data-full="http://s.fotorama.io/okonechnikov/9.jpg"></a>
	<a href="http://s.fotorama.io/okonechnikov/23-lo.jpg" data-full="http://s.fotorama.io/okonechnikov/23err.jpg"></a>
	<a href="http://s.fotorama.io/okonechnikov/14-lo.jpg" data-full="http://s.fotorama.io/okonechnikov/14.jpg"></a>
	<a href="http://s.fotorama.io/okonechnikov/15-lo.jpg" data-full="http://s.fotorama.io/okonechnikov/15err.jpg"></a>
	<a href="http://s.fotorama.io/okonechnikov/16-lo.jpg" data-full="http://s.fotorama.io/okonechnikov/16.jpg"></a>
</div>

<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>